<template>
  <div class="regist">
    <!-- 头部 -->
    <header class="regist_header">
      <div class="regist_header_left">
        <img src="../assets/logo.png" />
      </div>
      <div class="regist_header_right">星辰日报（Daily Star）</div>
    </header>
    <!-- 主题内容 -->
    <main class="regist_main">
      <div class="regist_main_title">
        <p><i>欢迎注册星辰日报</i></p>
        <p>~~~~~~~~~~</p>
      </div>
      <div class="regist_main_content">
        <div class="regist_main_content_ipt">
          <input
            v-model="form.user_name"
            type="text"
            placeholder="请输入您的昵称"
          />
        </div>
        <div class="regist_main_content_ipt">
          <input
            v-model="form.user_phone"
            type="number"
            placeholder="请输入手机号"
          />
        </div>
        <div class="regist_main_content_ipt">
          <input
            v-model="form.user_email"
            type="email"
            placeholder="请输入电子邮箱"
          />
        </div>
        <div class="regist_main_content_ipt">
          <input
            v-model="form.user_pwd1"
            type="password"
            placeholder="请输入密码"
          />
        </div>
        <div class="regist_main_content_ipt">
          <input
            v-model="form.user_pwd2"
            type="password"
            placeholder="再次输入确认密码"
          />
        </div>

        <div class="regist_main_content_btn">
          <button @click="submitFormFn">注册</button>
        </div>
      </div>
      <div class="regist_main_footer">
        <div class="regist_main_footer_box">
          <p @click="gotoLoginFn">已有账号？前往登录~</p>
        </div>
      </div>
    </main>
  </div>
</template>

<style lang="less" scoped>
@import "../css/variable.less";
.regist {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/registerbg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  // 自动调整大小
  background-attachment: fixed;
  color: white;
  padding: 10px;

  .regist_header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .regist_header_left {
      img {
        width: 60px;
      }
    }

    .regist_header_right {
      flex: 1;
      font-family: "mylogofont";
      font-weight: 700;
      font-size: 20px;
    }
  }

  .regist_main {
    font-size: 24px;
  }

  .regist_main_title {
    p {
      line-height: 50px;

      &:nth-child(1) {
        font-size: 32px;
      }
    }
  }

  .regist_main_content {
    width: 100%;

    .regist_main_content_ipt {
      width: 270px;
      margin: 15px auto;

      input {
        width: 270px;
        height: 45px;
        padding: 0 0 0 15px;
        font-family: "隶书";
        border: 1px solid aqua;
        color: black;
      }
    }

    .regist_main_content_btn {
      width: 270px;
      margin: 15px auto;

      button {
        color: black;
        font-weight: 700;
        font-family: "宋体";
        width: 270px;
        height: 50px;
        background: aqua;
      }
    }
  }

  .regist_main_footer {
    display: flex;
    justify-content: center;
    align-items: center;

    .regist_main_footer_box {
      font-size: 16px;
      border-bottom: 1px dashed aqua;
    }
  }
}
</style>

<script>
import RouterMixins from "@/components/mixins/RouterMixins";
export default {
  name: "RegistView",
  mixins: [RouterMixins],
  data() {
    return {
      form: {
        user_name: "",
        user_phone: "",
        user_email: "",
        user_pwd1: "",
        user_pwd2: "",
      },
      // 正则表达式用于验证邮箱格式
      emailRegex: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
      // 正则表达式用于验证电话号码格式
      phoneRegex: /^\d{11}$/,
      // 正则表达式用于验证中文字符
      chineseRegex: /[\u4e00-\u9fa5]/,
      // 密码长度9字符限制
      passwordRegex: /^.{9,}/,
      myLocalUser: [],
    };
  },
  methods: {
    // 提交表单时进行验证
    submitFormFn() {
      const invalidInputs = [];

      if (!this.validateEmailFn()) {
        invalidInputs.push("请输入正确格式的邮箱地址");
      }
      if (!this.validatePhoneFn()) {
        invalidInputs.push("请输入正确格式的电话号码");
      }
      if (!this.validateChineseFn()) {
        invalidInputs.push("请输入中文字符类型的昵称");
      }
      if (!this.validatePasswordFn()) {
        invalidInputs.push("请输入玖个字符的密码");
      }
      if (!this.validatePasswordMatchFn()) {
        invalidInputs.push("两次输入的密码不一致");
      }

      if (invalidInputs.length > 0) {
        alert(invalidInputs.join(", \n"));
        return;
      }
      this.addUserFormFn();
      this.form.user_name = "";
      this.form.user_phone = "";
      this.form.user_email = "";
      this.form.user_pwd1 = "";
      this.form.user_pwd2 = "";
      this.gotoLoginFn();
    },

    // 验证邮箱格式
    validateEmailFn() {
      return this.emailRegex.test(this.form.user_email);
    },
    // 验证电话号码格式
    validatePhoneFn() {
      return this.phoneRegex.test(this.form.user_phone);
    },
    // 验证中文昵称
    validateChineseFn() {
      return this.chineseRegex.test(this.form.user_name);
    },
    // 验证密码长度
    validatePasswordFn() {
      return this.passwordRegex.test(
        this.form.user_pwd1 || this.form.user_pwd2
      );
    },
    // 验证两次密码是否一致
    validatePasswordMatchFn() {
      return this.form.user_pwd1 === this.form.user_pwd2;
    },
    // 表单验证逻辑结束
    addUserFormFn() {
      // console.log(this.form);
      let { user_email, user_name, user_phone, user_pwd1 } = this.form;

      let localUser = { user_email, user_name, user_phone, user_pwd1 };
      localUser.id = Math.random().toString().slice(2);
      let arr = this.myLocalUser;
      let newArr = arr.filter((item) => item.user_phone === user_phone);
      if (newArr.length === 0) {
        // 没注册
        arr.push(localUser);
        this.myLocalUser = arr;
        localStorage.setItem("MYLOCALUSER", JSON.stringify(arr));
        alert("恭喜成功注册~请前往登录❤❤❤");
      } else {
        alert("该账号已经注册~请勿重复注册，前往登录~~~");
      }
    },
  },
  created() {
    let myLocalUserStr = localStorage.getItem("MYLOCALUSER");
    if (myLocalUserStr) {
      this.myLocalUser = JSON.parse(myLocalUserStr);
    }
  },
};
</script>
